import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import './SingListMenu.css';
import { Table, Radio, Divider, Button,Pagination, message } from 'antd';
import axios from '_axios@0.21.1@axios';
import CreateModal from './createModal/index';
import {connect} from 'react-redux';
import {useLocation,useHistory} from 'react-router-dom';
// import { OmitProps } from '_antd@4.15.1@antd/lib/transfer/ListBody';



const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record) => ({
    // disabled: record.name === 'Disabled User',
    // // Column configuration not to be checked
    // name: record.name,
  }),
};

const SingListMenu = (props) => {

  const columns = [
    {
      title: '歌单名',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '歌曲数目',
      dataIndex: 'count',
      key: 'count',
    },
    {
      title: '操作',
      render:(text,record,index)=>{
        return<>
          <a onClick={()=>{handleDelete(record.id)}}>删除</a>
          <Divider type="vertical" />
          <a onClick={()=>{history.push({pathname:'/app/menu2/detail',state:{id:record.id}})}}>查看</a>
        </>
      }
    },
  ];

  const history = useHistory();

  const [pageNo, setPageNo] = useState(1);
  const [pageSize,setPageSize] = useState(6);
  const [data,setData] = useState([]);
  const [visible, setVisible] = React.useState(false);
  const [total, setTotal] = useState(0);

  useEffect(()=>{
    getData({
      pageNo:1,
      pageSize:6
    }).then((res)=>{
      setData(res.data.rows);
      setTotal(res.data.total)
    })
  },[visible])

  const getData = (param) => {
    return (
      axios.post("http://localhost:8080/tsonglist/query",{
        pageNo:param.pageNo,
        pageSize:param.pageSize,
        param:{
          creator: props.id
        },
      })
    )
  }

  const handleDelete = (id)=>{
    axios.post('http://localhost:8080/tsonglist/delete',{id:id}).then(()=>{
      message.success("删除成功");
      getData({
        pageNo:1,
        pageSize:6
      }).then((res)=>{
        setData(res.data.rows);
        setTotal(res.data.total)
      })
    })
  }

  const showModal = (isVisible)=> {
    setVisible(isVisible);
  }

  const onChangePage = (pageNo1,pageSize1)=>{
    console.log(pageNo1,pageSize1);
    setPageNo(pageNo1);
    setPageSize(pageSize1);
    getData({
      pageNo: pageNo1,
      pageSize: pageSize1,
    }).then((res)=>{
      setTotal(res.data.total);
      setData(res.data.rows);
    })
  }

  return (
    <div>
      <Button type="primary" onClick={()=>{showModal(true)}}>
        新建
      </Button>
      {visible&&<CreateModal visible={showModal} getData={getData} />}
      <Table
        rowSelection={{
          type: 'radio',
          ...rowSelection,
        }}
        pagination={false}
        columns={columns}
        dataSource={data}
      />
      <Pagination 
        showQuickJumper 
        defaultCurrent={1} 
        pageSize={pageSize} 
        total={total} 
        onChange={onChangePage} />
    </div>
  );
};

const MapStateToProps = (state) => {
  return {
    id:state.id
  }
}

export default connect(MapStateToProps)(SingListMenu);